<template>
	<div>
		<a-layout id="components-layout-demo-fixed-sider">
			<a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
				<div class="logo">
					<a-avatar src="../../../build/icons/icon.ico" />
				</div>
				<a-menu
					theme="dark"
					mode="inline"
					:default-selected-keys="['1']"
				>
					<a-menu-item key="1">
						<a-icon type="file" />
						<span class="nav-text">全部文件</span>
					</a-menu-item>
					<a-menu-item key="2">
						<a-icon type="picture" />
						<span class="nav-text">图片</span>
					</a-menu-item>
					<a-menu-item key="3">
						<a-icon type="book" />
						<span class="nav-text">文档</span>
					</a-menu-item>
					<a-menu-item key="4">
						<a-icon type="play-square" />
						<span class="nav-text">视频</span>
					</a-menu-item>
					<a-menu-item key="5">
						<a-icon type="customer-service" />
						<span class="nav-text">音乐</span>
					</a-menu-item>
					<a-menu-item key="6">
						<a-icon type="file-unknown" />
						<span class="nav-text">其他</span>
					</a-menu-item>
				</a-menu>
				<!-- <div id="layout-sider-foot">
           <a-avatar src="../../../build/icons/icon.ico" />
           111
      </div> -->
			</a-layout-sider>

			<a-layout :style="{ marginLeft: '200px' }">
				<a-layout-header id="header">
					<a-upload
						id="upload"
						name="file"
						:multiple="true"
						action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
						:headers="headers"
						@change="handleChange"
					>
						<a-space>
							<a-button id="btn">
								<a-icon type="upload" /> 上传
							</a-button>
							<a-button>
								<a-icon type="download" />下载
							</a-button>
						</a-space>
					</a-upload>

				</a-layout-header>

				<a-layout-content id="content">
					<!-- :style="{ margin: '24px 16px 0', overflow: 'initial' }" -->
					<!-- <div :style="{ padding: '50%', background: '#fff', textAlign: 'center' }">
          
        </div> -->
					<ul id="fileList">
						<li
							v-for="item in fileList"
							v-bind:key="item"
						>
							<div class="fileItem">
								<img
									v-bind:src="'../../../build/icons/images/' + item.fileType + '.svg'"
									:onerror="errorImg"
								>
								<p>{{item.fileName}}</p>
							</div>
						</li>
					</ul>
				</a-layout-content>

			</a-layout>
		</a-layout>
	</div>

</template>

<script>


        // fileName : '视频',//文件名
        // fileType : 'mp4',//文件类型
        // fileSize : '423423',//文件大小
        // upLoadData : '2000-01-01 03:00:00',//上传时间
        // localFilePath : 'C:/',//本地路径
        // cloudFilePath : 'C:/',//云端路径


// import axios from 'axios'
export default {
  data() {
    return {
      fileList:[],
      headers: {
        authorization: 'authorization-text',
      },
      errorImg:'this.src="' + '../../../build/icons/images/unkonw.svg' + '"'
      

    };
  },
  mounted(){
      this.init()
  },
  methods: {
    init(){
        this.$http.get('../../../public/mock/fileList.json').then((response)=>{
            let res = response.data
            this.fileList = res.data
        })
    },
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
  },

};
</script>

<style>
#btn{
    margin-left: -30px;
}

#breadcrumb{
    margin-left: -30px;
    
}
#header{
    position: fixed;
    z-index: 1;
    background-color: #fff;
    width: 100vw;
}
#content{
    background-color: white;
}
#components-layout-demo-fixed-sider .logo {
  height: 32px;
  margin: 16px;
}
#layout-sider-foot{
    position:fixed; 
    bottom:0px; 
    color: white;
}
#fileList{
        list-style: none;
        background-color: white;
        padding-top: 80px;
    }
    .fileItem {
        float: left;
        padding-right: 2em;
        padding-top: 2em;
        border-radius: 5px;
    }
    .fileItem img{
        height: 80px;
        width: 80px;
        position: relative;
        left: 18%;
    }
    .fileItem p{
        position: relative;
        text-align: center;
        left: 18%;

    }
    .fileItem p:hover{
        cursor: default;
    }
    .fileItem:hover{
        background-color:rgb(207, 207, 207);

    }
</style>
